<template>
    <div class="header" :class="{ 'header-collapse': collapse }">
        <div class="left-header">
            <!-- 折叠按钮 -->
            <!-- <div class="collapse-btn" @click="collapseChage">
                <i v-if="!collapse" class="el-icon-s-fold"></i>
                <i v-else class="el-icon-s-unfold"></i>
            </div> -->
            <img src="@/assets/img/logo_bai.png" alt="" style="cursor: pointer;" @click="collapseChage">
            <span>大坝安全监测预警管理平台</span>
             <!-- <span class="type"> 政府端</span> -->
        </div>
        <div class="header-right">
            <div class="header-user-info">
                <img :src="userImg? Url+userImg: require('../assets/img/user.png')" alt="">
                <!-- <span >{{userName}}</span> -->
            </div> 
            <el-dropdown>
                <el-button type="primary">
                    {{userName}} | {{roleName}} ( {{areaName}}用户 )<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="handleChangePassword">修改密码</el-dropdown-item>
                        <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <router-link  class="link" target="_blank" to="/largeScreen">
                <el-button type="primary" class="danger-btn" style="margin-left: 10px;" icon="el-icon-monitor" >
                    大屏展示
                </el-button>
            </router-link>
            <!-- <el-button type="primary" icon="el-icon-edit" @click="handleChangePassword">修改密码</el-button>
            <el-button class="danger-btn" type="danger" icon="el-icon-circle-close"  @click="handleLogout">退出登录</el-button> -->
        </div>
        <reset @onChange="onChangeReset" :item="resetItem" :visible="isResetShow"></reset>
    </div>
</template>
<script>
// import adminApi from '@/api/login'
import reset from '@/views/systemManagel/userManage/reset.vue'
import { Url } from '@/api/url'
export default {
    components: {
        reset
    },
    data() {
        return {
            Url,
            dialogFormVisible: false,
            routerName: '',
            userName: '',
            roleName:'',
            areaName:'',
            userImg: null,
            isResetShow: false,
            resetItem: {
                userId: ''
            },
            form: {
                userId: '',
                oldPassword: '',
                newPassword: ''
            },
            rules: {
                oldPassword: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' },
                ],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                ],
            }
        };
    },
     watch: {
        $route() {
            this.routerName = this.$route.meta.title
        }
    },
    computed: {
        collapse() {
            return this.$store.state.local.collapse
        }
    },
    created() {
        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        if(!userInfo) {
            return
        }
        this.resetItem.userId = userInfo.userId
        this.userName = userInfo.name
        this.roleName = userInfo.roleName
        this.areaName = userInfo.areaName
        this.userImg = userInfo.imgUrl
        this.routerName = this.$route.meta.title
    },
    mounted() {
        if (document.body.clientWidth < 1500) {
            this.collapseChage();
        }
    },
    methods: {
        collapseChage() {
            this.$store.commit("hadndleCollapse", !this.collapse)
        },
        toScreen() {
            window.open('./dashboard')
        },
        handleLogout() {
            this.$confirm('此操作将退出登录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then((res) => {
                    this.$store.dispatch('Logout')
                    .then(() => {})
                    .catch((err) => {
                        this.$message.error(err.message)
                    })
                }).catch(() => {})
        },
        handleChangePassword() {
            this.isResetShow = true
            
        },
        onChangeReset() {
            this.isResetShow = false
        }
    }
};
</script>
<style scoped>
.header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 60px;
    background: url('../assets/img/tabbar-bg.png') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-transition: left .3s ease-in-out;
    transition: left .3s ease-in-out;
    /* padding: 10px 0 0; */
}
.type {
    padding: 5px 20px;
    background: white;
    color: #0A4985;
    font-size: 16px;
    font-weight: 600;
    margin-left: 10px;
    border-radius: 2px;
}
 .header-collapse {
    /* left: 65px; */
    
}
.left-header {
    color: white;
    padding-left: 20px;
    font-size: 22px;
    display: flex;
    letter-spacing:5px;
    font-weight: bold;
    align-items: center;
    
}
.left-header img{
    margin-right: 10px;
    width: 40px;
}
.collapse-btn {
    padding: 0 21px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
}
.link {
    font-size: 16px;
}
.header .logo {
    float: left;
}
.header .logo img {
    width: 100px;
}
.header-right {
    margin-right: 30px;
    display: flex;
    align-items: center;
}
.header-right  .header-user-info {
    display: flex;
    align-items: center;
    margin: 0 10px;
    color: white;
}
.header-right img{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-right: 5px;
}
.logout-btn {
    margin-left: 10px;
    display: flex;
    cursor: pointer;
    font-size: 16px;
}
.logout-btn img {
    margin-right: 5px;
    width: 20px;
}
.link {
    color: white;
    font-size: 12px;
}
</style>
